<template>
  <div class="modal" ref="modal" tabindex="-1" role="dialog" data-show="true" data-backdrop="static">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="myModalLabel">{{$route.query.name}}</h4>
        </div>
        <div class="modal-body no-padding">
          <TreeGrid style="height:400px"
                    :data="permissionList" idField="id" treeField="name" checkbox>
            <GridColumn field="name" title="名称"></GridColumn>
            <GridColumn field="permissionKey" title="标识"></GridColumn>
            <GridColumn field="typeAlias" title="类型"></GridColumn>
          </TreeGrid>
        </div>
        <div class="modal-footer">
          <bs-button data-dismiss="modal" class="pull-left" :disabled="loading" html-type="button">取消</bs-button>
          <bs-button icon="fa fa-save" class="pull-right" type="primary" :loading="loading" @click="onSavePermission">确 认</bs-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import utils from '@/utils';

  export default {
    name: 'SystemRoleGrant',
    mixins: [utils.ModalMixins],
    data() {
      return {
        loading: false,
        permissionList: [],
        granted: []
      };
    },
    mounted() {
      this.loadPermissionList();
    },
    methods: {
      loadPermissionList() {
        this.$api('system.role.permissionList').invoke({
          id: this.$route.query.id
        }).then(({data}) => {
          this.permissionList = data;
        });
      },
      onSavePermission() {
        const checked = utils.getChecked(this.permissionList, ['checked', 'indeterminate']);
        const pids = checked.map(value => value.id);
        this.$api('system.role.grant').invoke({
          id: this.$route.query.id,
          pids: pids
        }, {qs: {arrayFormat: 'repeat'}}).then(({data}) => {
          this.$snotify.success('授权成功！');
        });
      }
    }
  };
</script>

<style scoped>

</style>
